[실전] 검색창 UI 만들기

웹퍼블리싱 배우기. 이번에는 키워드를 찾아 검색할 수 있는 기능을 웹에 추가하기 위하여 검색창을 만드는 방법을 알아보겠습니다.

# 검색창은 무엇이고 언제 사용되나요

검색창은 방문자에게 원하는 웹사이트의 콘텐츠를 좀 더 찾기 쉽도록 도와주는 역할을 합니다. 예를 들어 css에 관련된 블로그 글을 찾는 경우 간단하게 검색창에 css를 타이핑하여 검색결과로 확인 및 이동하게됩니다. 아래에서는 검색창을 구현해보고 아래 사항도 고려하여 만들도록 하겠습니다.

• 
  - 서버와 연동하기
• - 부트스트랩을 활용한 UI

서버와 연동하는 경우 동기식, 비동기식 두가지가 존재합니다. 비동기식 ajax는 별도의 양식에 대한 고민이 크지 않으므로 동기식 방법으로 알아보겠습니다.

그리고 부트스트랩을 사용하여 UI를 퍼블리싱하면 더 간단하고 쉽게 만들 수 있습니다. 여기서도 부트스트랩을 활용해보도록 하겠습니다 

​​​​​​​# Search,검색창 UI 구현하기

먼저 아래는 html과 css를 사용하여 검색하기 편리한 인터페이스를 구현하였습니다.

여기서 서버와 통신하기 위해 form 태그를 사용하였으며 아래의 값을 설정하였습니다.

• 
  
  • method - 통신 방식의 메소드를 결정하며 get/post에서 선택함
  • action - 값을 전달할 서버 페이지 위치

버튼을 클릭 할 경우 설정된 submit을 동작하여 입력된 값이 서버에 전송됩니다.

여기서 입력값을 받을 수 있는 입력폼이 필요한데 우리는 input 태그를 사용하였습니다. input은 짧은 텍스트 정보를 사용자로부터 입력받는데 매우 효과적입니다. 설정값으로 text 또는 search가 존재합니다. search의 경우 ESC키 및 취소가 가능한 인터페이스를 지원하는데 브라우저마다 차이가 있어 여기서는 text를 사용하여 구현했습니다.

이제 기능에 충실한 입력폼이 완성되었습니다. 하지만 뭔가 부족한데요.. css를 고려한 디자인이 필요해보입니다. 앞서 얘기한 부트스트랩과 css를 적용하여 보겠습니다.

위 방법은 부트스트랩을 사용하여 매우 간단하게 검색 UI를 구현한 모습입니다. 위에 사용된 속성값을 추가하면 별도의 스타일 추가없이 검색폼 퍼블리싱이 가능합니다.

이 방법은 버튼 태그를 사용하기 위한 방법입니다. 먼저 설명한 태그와 거의 비슷하나 클래스명이 조금 다른 차이입니다.